<template>
    <div class="stand-start">
        <div class="user-avatar-wrap">
            <div class="user-avatar">
                <img src="../assets/avator.jpg" alt="">
            </div>
            <p class="user-name">莫失莫忘</p>
        </div>
        <div class="slide-wrap">
            <Slide>
                <div class="swiper-slide ">
                    <div class="question-title">题目分类</div>
                    <div class="bg-color ques-wrap">
                        <div class="question-num">
                            <p>ROUND <span>0</span></p>
                        </div>
                        <div class="ques-content">
                            <ul>
                                <li class="ques-item clearfix">
                                    <div class="fl">当前积分</div>
                                    <div class="fr">0</div>
                                </li>
                                <li class="ques-item clearfix">
                                    <div class="fl">正确率</div>
                                    <div class="fr">0%</div>
                                </li>
                                <li class="ques-item clearfix">
                                    <div class="fl">本地排行</div>
                                    <div class="fr">0</div>
                                </li>
                                <li class="ques-item clearfix">
                                    <div class="fl">全国排名</div>
                                    <div class="fr">0</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide ">
                    <div class="question-title">题目分类</div>
                    <div class="bg-color ques-wrap">
                        <div class="question-num">
                            <p>ROUND <span>0</span></p>
                        </div>
                        <div class="ques-content">
                            <ul>
                                <li class="ques-item clearfix">
                                    <div class="fl">当前积分</div>
                                    <div class="fr">0</div>
                                </li>
                                <li class="ques-item clearfix">
                                    <div class="fl">正确率</div>
                                    <div class="fr">0%</div>
                                </li>
                                <li class="ques-item clearfix">
                                    <div class="fl">本地排行</div>
                                    <div class="fr">0</div>
                                </li>
                                <li class="ques-item clearfix">
                                    <div class="fl">全国排名</div>
                                    <div class="fr">0</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </Slide>
        </div>
        <div class="start-wrap">
            <button class="btn-start" @click="jumpToStandAlone">开始挑战</button>
        </div>
    </div>
</template>

<script>
    import Slide from 'base/slide'

    export default {
        name: "StandStart",
        components:{
            Slide
        },
        methods:{
            jumpToStandAlone(){
                this.$router.push('/standAlone')
            }
        }
    }
</script>

<style scoped lang="less">
    .stand-start{
        padding: 0.25rem 0.35rem;
        width: 100vw;
        height: 100vh;
        background:url("../assets/bg.jpg") no-repeat center center;
        background-size: cover;
    }
    .user-avatar-wrap{
        background: url("../assets/user_bg.png") no-repeat center center;
        background-size: cover;
        height: 3.1rem;
        border-radius:0.1rem;
        overflow: hidden;
        text-align: center;
        padding-top: 0.45rem;
        .user-avatar{
            display: inline-block;
            width: 1.6rem;
            height: 1.6rem;
            overflow: hidden;
            border-radius: 50%;
            border: 0.05rem solid #FFFFFF;
        }
        .user-name{
            font-size: 0.32rem;
            color: #FFFFFF;
            margin-top: 0.15rem;
        }
    }
    .slide-wrap{
        border-radius:0.1rem;
        overflow: hidden;
        margin-top: 0.3rem;
        box-shadow: 0 2px 0 #3e67ad;
        .question-title{
            text-align: center;
            color: #FFFFFF;
            font-size: 0.32rem;
            padding: 0.2rem;
            width: 5.69rem;
            height: 1.5rem;
            background: url("../assets/challenge/subject_bg.png") no-repeat center center;
            background-size: 100% 100%;
            margin: 0 auto;
            position: relative;
            z-index: 9;
        }
        .ques-wrap{
            height: 5.2rem;
            padding-top: 0.8rem;
            margin-top: -0.8rem;
            border-radius:0.1rem;
        }
        .question-num{
            text-align: center;
            color: #FFFFFF;
            font-size: 0.35rem;
        }
        .ques-content{
            margin-top: 0.6rem;
            font-size: 0.35rem;
            padding: 0 1.5rem;
            color: #FFFFFF;
            .ques-item{
                &:nth-child(2){
                    margin-bottom: 0.2rem;
                }
            }
        }
    }
    .start-wrap{
        text-align: center;
        margin-top: 0.4rem;
    }
    .bg-color{
        background-color: #61a0e7;
    }
</style>
